<template>
    <view class="p20">
        <view :prop="sender" :change:prop="renderMaps.handleAction" id="echartsmap" class="map-box"></view>
    </view>
</template>

<script>
import { getLoginMsg } from '@/utils/util'
export default {
    props: {
        echartData: {
            type: String,
        },
        type: {
            type: String,
        }
    },
    data() {
        return {
            sender: {
                handle: '', //调用视图层方法的名字
                callback: '', //回调函数的名字
                options: null, //传递给视图层的数据
                AdminCode: getLoginMsg()?.AdminCode,
            },
        }
    },
    watch: {
        echartData(val) {
            this.sendMsg('updateEcharts', '', { echartData: val, type: this.type })
        },
    },
    methods: {
        /**
         * 逻辑层传递数据到视图层 类似父传子
         *
         * @param handle 触发视图层的方法名称
         * @param callback 视图层的方法名称（可选）暂时无用
         * @param options 消息发送的配置选项
         * @param rendCallback 逻辑层的回调函数（可选）暂时无用
         */
        sendMsg(handle, callback, options, rendCallback) {
            this.sender = {
                handle,
                options,
                callback,
                rendCallback,
                AdminCode: getLoginMsg()?.AdminCode,
            }
        },
    },
}
</script>
<script module="renderMaps" lang="renderjs">
import { getTownByCode } from '@/map/json/district'
let myChart
const options = {
    tooltip: {
        show: true,
        formatter(params) {
            const regionData = params.data;
            // #ifdef APP-PLUS
            return `${regionData.name}<br/>隐患点：${regionData.value}<br/>速报点：${regionData.SuBaoDian}<br/>威胁人口：${regionData.WeiXieRenKou}<br/>威胁财产：${regionData.WeiXieCaiChan}`;
            // #endif
            // #ifdef H5
            return `${regionData.name}\n隐患点：${regionData.value}\n速报点：${regionData.SuBaoDian}\n威胁人口：${regionData.WeiXieRenKou}\n威胁财产：${regionData.WeiXieCaiChan}`;
            // #endif
        },
    },
    visualMap: {
        type: 'piecewise',
        color: ['#dc143c', '#f7f1f1'],
        pieces: [
            { min: 100 },
            { min: 50, max: 99 },
            { min: 10, max: 49 },
            { max: 9 },
        ],
    },
    series: [
        {
            aspectScale: 0.87,
            type: 'map',
            map: 'town',
            zoom: 1.2,
            roam: false,
            label: {
                show: false,
            },
            itemStyle: {
                borderColor: '#6F4241',
            },
            emphasis: {
                // 选中样式
                label: {
                    // 文字样式
                    color: '#000000',
                },
                itemStyle: {
                    areaColor: '#F0DE54',
                },
            },
            data: [],
        },
    ],
};
export default {
    data() {
        return {
            AdminCode: '430524',
        }
    },
    mounted() {
        if (typeof window.echarts === 'function') {
            this.mYChartmap()
        } else {
            // 动态引入较大类库避免影响页面展示
            const script = document.createElement('script')
            script.src = 'static/echarts.min.js'
            script.onload = this.mYChartmap.bind(this)
            document.head.appendChild(script)
        }
    },
    methods: {
        handleAction(newValue, oldValue, ownerInstance, instance) {
            console.log('逻辑层传递过来的数据', JSON.stringify(newValue))
            if (newValue.AdminCode) this.AdminCode = newValue.AdminCode
            const handle = this[newValue.handle]
            let options = newValue.options
            // this.callback = newValue.callback
            if (!options) {
                options = undefined
            }
            if (!handle) {
                console.info('参数为标记需要执行的方法')
                return
            }
            handle(options)
        },
        mYChartmap() {
            myChart = echarts.init(document.getElementById('echartsmap'))
            echarts.registerMap('town', getTownByCode(this.AdminCode).data)
            // myChart.setOption(this.option)
        },
        updateEcharts(newValue, oldValue, ownerInstance, instance) {
            if (myChart) {
                const l = JSON.parse(newValue.echartData)
                myChart.setOption(this.handleOptionsFn(newValue.type,l))
            }
        },
        handleOptionsFn(type,data){
            options.series[0].data = data
            switch (type) {
                case '1':
                    options.tooltip.formatter = (params) => {
                        const regionData = params.data;
                        // #ifdef APP-PLUS
                        return `${regionData.name}<br/>隐患点：${regionData.value}<br/>速报点：${regionData.SuBaoDian}<br/>威胁人口：${regionData.WeiXieRenKou}<br/>威胁财产：${regionData.WeiXieCaiChan}`;
                        // #endif
                        // #ifdef H5
                        return `${regionData.name}\n隐患点：${regionData.value}\n速报点：${regionData.SuBaoDian}\n威胁人口：${regionData.WeiXieRenKou}\n威胁财产：${regionData.WeiXieCaiChan}`;
                        // #endif
                    }
                    options.visualMap.pieces = [
                        { min: 100 },
                        { min: 50, max: 99 },
                        { min: 10, max: 49 },
                        { max: 9 },]
                    break;
                case '2':
                    options.tooltip.formatter = (params) => {
                        const regionData = params.data;
                        // #ifdef APP-PLUS
                        return `${regionData.name}<br/>户数：${regionData.value}`
                        // #endif
                        // #ifdef H5
                        return `${regionData.name}\n户数：${regionData.value}`
                        // #endif
                    }
                    options.visualMap.pieces = [
                        { min: 1000 },
						{ min: 500, max: 999 },
						{ min: 100 ,max: 499 },
						{ max: 99 }]
                    break;
                case '3':
                    options.tooltip.formatter = (params) => {
                        const regionData = params.data;
                        // #ifdef APP-PLUS
                        return `${regionData.name}<br/>风险区：${regionData.value}<br/>威胁户数：${regionData.WeiXieHuShu}<br/>威胁人口：${regionData.WeiXieRenKou}<br/>威胁财产：${regionData.WeiXieCaiChan}`;
                        // #endif
                        // #ifdef H5
                        return `${regionData.name}\n风险区：${regionData.value}\n威胁户数：${regionData.WeiXieHuShu}\n威胁人口：${regionData.WeiXieRenKou}\n威胁财产：${regionData.WeiXieCaiChan}`;
                        // #endif
                    }
                    options.visualMap.pieces = [
                        { min: 100 },
                        { min: 50, max: 99 },
                        { min: 10, max: 49 },
                        { max: 9 },]
                    break; 
                case '4':
                    options.tooltip.formatter = (params) => {
                        const regionData = params.data;
                        // #ifdef APP-PLUS
                        return `${regionData.name}<br/>站点数：${regionData.value}`
                        // #endif
                        // #ifdef H5
                        return `${regionData.name}\n站点数：${regionData.value}`
                        // #endif
                    }
                    options.visualMap.pieces = [
                        { min: 6 },
						{ min: 4, max: 5 },
						{ min: 2 ,max: 3 },
						{ max: 1 }]
                    break;   
          
            }
            return options
        }
    },
}
</script>
<style lang="scss" scoped>
//map地图盒子
.map-box {
    height: 850rpx;
}
</style>
